<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title>就餐人数统计</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>

    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="/report/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/report/assets/css/animate.min.css" rel="stylesheet"/>
    <link href="/report/assets/css/style.min.css" rel="stylesheet"/>
    <link href="/report/assets/css/style-responsive.min.css" rel="stylesheet"/>
    <link href="/report/assets/css/theme/default.css" rel="stylesheet" id="theme"/>
    <link href="/report/assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
    <link href="/report/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/report/assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet"/>
    <!-- ================== END BASE CSS STYLE ================== -->

    <link href="/report/assets/plugins/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet"/>
    <link href="/report/assets/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="/report/common/css/commonCSS.css" rel="stylesheet">
	<link rel="stylesheet" href="/report/assets/css/style_lanling.css">
</head>

<body class="pace-done" style="min-width:1015px">
<div class="fade in hide" id="page-loader"><span class="spinner"></span></div>
<div id="page-container" class="fade in">
    <div id="content" class="content">
        <ol class="breadcrumb pull-right">

        </ol>
        <div class="row">
            <h1 class="page-header">
                <span class="page-header-span">就餐人数统计</span>
                <i data-toggle="tooltip" data-placement="right" title="统计筛选时间段内就餐的人数"
                   class="fa fa-question-circle"></i>
            </h1>
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title" id="chartHead">
                        就餐人数统计
                    </h4>
                </div>
                <div class="panel-body">
                    <input type="hidden" id="saveURL" value="/wechatprogram/webreport/listVisitData"/>
                    <div style="font-size:0;" class="text-right">
                        <div class="btn-group m-r-4" style="margin-bottom:18px;">
                            <button id="myDropdown" type="button" class="ttw btn-toggle btn btn-primary dropdown-toggle"
                                    aria-haspopup="true" aria-expanded="false">最近七天&nbsp;&nbsp;<span
                                    class="caret"></span></button>
                            <ul class="dropdown-menu" style="min-width: 275px;">
                                <li><a class="ttw0" data-p="" href="javascript:;">昨天</a></li>
                                <li><a class="ttw1" data-p="" href="javascript:;">今天</a></li>
                                <li><a class="ttw2" data-p="" href="javascript:;">最近七天</a></li>
                                <li><a class="ttw3" data-p="" href="javascript:;">最近一个月</a></li>
                                <!--li><a class="ttw4" data-p="" href="javascript:;">全部时间</a></li-->
                                <li style="height: 120px; padding-top: 10px;margin-top: 10px;border-top: 1px solid #e2e7e8;">
                                    <span style="margin-left: 15px">自定义时间范围：</span>
                                    <div class="form-inline text-center">
                                        <input id="tm1" size="16" readonly=""
                                               class="form-control form_datetime m-2 input-sm" name="startT"
                                               type="text">
                                        <input id="tm2" size="16" readonly=""
                                               class="form-control form_datetime m-2 input-sm" name="endT" type="text">
                                    </div>
                                    <div style="padding-top: 10px;margin-top: 4px;border-top: 1px solid #e2e7e8;"
                                         class="text-center">
                                        <button class="btn btn-primary m-2" style="width:97%;" type="button"
                                                onclick="$('#myDropdown').parent().removeClass('open');queryAll('',1)">
                                            确认
                                        </button>
                                    </div>
                                </li>
                            </ul>
                        </div>
<!--                        <div id="byloadTimes" class="m-r-4 f-s-14" style="display:inline-block;">-->
<!--                            <select class="selectpicker">-->
<!--                                <option value="-1">新老访客</option>-->
<!--                                <option value="1">老访客</option>-->
<!--                                <option value="0">新访客</option>-->
<!--                            </select>-->
<!--                        </div>-->
<!--                        <div id="bylogItems" class="m-r-4 f-s-14" style="display:inline-block;">-->
<!--                            <select class="selectpicker">-->
<!--                                <option value="-1">全部类别</option>-->
<!--                                <option value="1">早餐</option>-->
<!--                                <option value="2">午餐</option>-->
<!--                                <option value="3">晚餐</option>-->
<!--                            </select>-->
<!--                        </div>-->
<!--                        <div class="m-r-4" style="display:inline-block;vertical-align: top;">-->
<!--                            <select class="form-control selectpicker" widgetType="channel_list">-->
<!--                                <option value="-1">全部大渠道</option>-->
<!--                            </select>-->
<!--                        </div>-->
<!--                        <div class="m-r-4" style="display:inline-block;vertical-align: top;">-->
<!--                            <select class="form-control selectpicker" widgetType="source_list">-->
<!--                                <option value="-1">全部小渠道</option>-->
<!--                            </select>-->
<!--                        </div>-->
                        <button type="button" onclick="exportExcel_new()" class="btn btn-primary pull-right f-s-14"><i
                                class="glyphicon glyphicon-download"></i>&nbsp;导出报表
                        </button>
                    </div>
                    <div class="row m-t-15">
                        <div class="col-md-6">
                            <div id="main" style="height:400px;"></div>
                        </div>
                        <div class="col-md-6">
                            <div id="mainPie" style="height:400px;"></div>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>日期&nbsp;<i data-toggle="tooltip" data-placement="right" title="查询时间小于三天按小时显示与统计，时间大于三天并且小于32天按天显示与统计，时间大于32天按月显示与统计"
                                class="fa fa-question-circle"></i></th>
                            <th>早餐就餐人数&nbsp;<i data-toggle="tooltip" data-placement="right" title="当日早餐就餐人数"
                                class="fa fa-question-circle"></i></th>
                            <!-- <th>大渠道</th>
                            <th>小渠道</th> -->
                            <th>午餐就餐人数&nbsp;<i data-toggle="tooltip" data-placement="right" title="当日午餐就餐人数的数量"
                                               class="fa fa-question-circle"></i></th>
                            <th>晚餐就餐人数&nbsp;<i data-toggle="tooltip" data-placement="right" title="当日晚餐就餐人数的数量"
                                             class="fa fa-question-circle"></i></th>
                            <th>就餐总人数&nbsp;<i data-toggle="tooltip" data-placement="right" title="当日就餐总人数"
                                               class="fa fa-question-circle"></i></th>
                        </tr>
                        </thead>
                        <tbody id="visitDataTable">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <a data-click="scroll-top" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" href="javascript:;"><i
            class="fa fa-angle-up"></i></a>

    <div id="full-screen-loading"></div>
</div>
<!-- ================== BEGIN BASE JS ================== -->
<script src="/report/assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="/report/assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
<script src="/report/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="/report/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/report/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/report/assets/plugins/gritter/js/jquery.gritter.js"></script>
<script src="/report/assets/js/apps.min.js"></script>

<![endif]-->
<!-- ================== END BASE JS ================== -->

<script src="/report/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/report/common/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="/report/assets/plugins/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/report/common/js/customMethod.js"></script>
<script src="/report/common/js/echarts/echarts.min.js"></script>
<script src="/report/common/js/echarts/macarons.js"></script>
<script src="/report/common/js/countUp.js"></script>
<script src='/report/common/js/commonJs.js'></script>
<script src="/report/js/util.js"></script>
<script type="text/javascript">

    //日期排序yyyy-mm-dd
    function ymd_up (a, b) {
        var c = a.split('-')
        var d = parseInt(c[0] + '' + c[1] + '' + c[2])
        var e = b.split('-')
        var f = parseInt(e[0] + '' + e[1] + '' + e[2])
        return (d > f) ? 1 : -1
    }

    //日期小时排序yyyy-mm-dd-hh
    function ymdh_up (a, b) {
        var c = a.split('-')
        var d = parseInt(c[0] + '' + c[1] + '' + c[2] + '' + c[3])
        var e = b.split('-')
        var f = parseInt(e[0] + '' + e[1] + '' + e[2] + '' + e[3])
        return (d > f) ? 1 : -1
    }
    //报表全局变量
    var dateArray = []
    var dataArray1 = []//早餐就餐人数
    var dataArray2 = []//午餐就餐人数
    var dataArray3 = []//晚餐就餐人数
    var dataArray4 = []//就餐总人数
    var dataArrayS = []

    function analysis (json) {
        //图表变量
        var myChart1 = echarts.init(document.getElementById('main'), 'macarons')
        var myChart2 = echarts.init(document.getElementById('mainPie'), 'macarons')
        var ListVisit = json.data.list
        var ListTimes = json.data.list
        //清空全局变量
        dateArray = []
        dataArray1 = []
        dataArray2 = []
        dataArray3 = []
        dataArray4 = []
        var dataMap = {}
        var mapArray = []
        if (!ListVisit[0]) {
            dateArray.push('一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月')
            dataArray1.push(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)
        } else {
            //存就餐人数
            for (var i = 0; i < ListVisit.length; i++) {
                // 就餐总人数
                if (dataMap[ListVisit[i].day]) {
                    if (isNaN(parseInt(dataMap[ListVisit[i].day].visits))) {
                        dataMap[ListVisit[i].day].visits = ListVisit[i].visitCount
                    } else {
                        dataMap[ListVisit[i].day].visits = dataMap[ListVisit[i].day].visits + ListVisit[i].visitCount
                    }
                } else {
                    dataMap[ListVisit[i].day] = {}
                    dataMap[ListVisit[i].day].visits = ListVisit[i].visitCount
                }
                // 早餐就餐人数
                if (dataMap[ListVisit[i].day]) {
                    if (isNaN(parseInt(dataMap[ListVisit[i].day].earlys))) {
                        dataMap[ListVisit[i].day].earlys = ListVisit[i].earlyPeople
                    } else {
                        dataMap[ListVisit[i].day].earlys = dataMap[ListVisit[i].day].earlys + ListVisit[i].earlyPeople
                    }
                } else {
                    dataMap[ListVisit[i].day] = {}
                    dataMap[ListVisit[i].day].earlys = ListVisit[i].earlyPeople
                }
                // 午餐就餐人数
                if (dataMap[ListVisit[i].day]) {
                    if (isNaN(parseInt(dataMap[ListVisit[i].day].middays))) {
                        dataMap[ListVisit[i].day].middays = ListVisit[i].middayPeople
                    } else {
                        dataMap[ListVisit[i].day].middays = dataMap[ListVisit[i].day].middays + ListVisit[i].middayPeople
                    }
                } else {
                    dataMap[ListVisit[i].day] = {}
                    dataMap[ListVisit[i].day].middays = ListVisit[i].middayPeople
                }
                // 晚餐就餐人数
                if (dataMap[ListVisit[i].day]) {
                    if (isNaN(parseInt(dataMap[ListVisit[i].day].evenings))) {
                        dataMap[ListVisit[i].day].evenings = ListVisit[i].eveningPeople
                    } else {
                        dataMap[ListVisit[i].day].evenings = dataMap[ListVisit[i].day].evenings + ListVisit[i].eveningPeople
                    }
                } else {
                    dataMap[ListVisit[i].day] = {}
                    dataMap[ListVisit[i].day].evenings = ListVisit[i].eveningPeople
                }
            }
            //存就餐人数
            // for (var j = 0; j < ListTimes.length; j++) {
            //     if (dataMap[ListTimes[j].day]) {
            //         if (isNaN(parseInt(dataMap[ListTimes[j].day].times))) {
            //             dataMap[ListTimes[j].day].times = ListTimes[j].visitCount
            //         } else {
            //             dataMap[ListTimes[j].day].times = dataMap[ListTimes[j].day].times + ListTimes[j].visitCount
            //         }
            //     } else {
            //         dataMap[ListTimes[j].day] = {}
            //         dataMap[ListTimes[j].day].times = ListTimes[j].visitCount
            //     }
            // }
            //存日期
            mapArray = []
            for (var x in dataMap) {
                mapArray.push(x)
            }
            //日期排序
            mapArray.sort(ymd_up)
            //向报表List中写数据
            for (var y in mapArray) {
                var z = dataMap[mapArray[y]]
                //date
                dateArray[y] = mapArray[y]
                //lineVisit
                if (z.earlys) {
                    dataArray1[y] = z.earlys
                } else {
                    dataArray1[y] = 0
                }
                if (z.middays) {
                    dataArray2[y] = z.middays
                } else {
                    dataArray2[y] = 0
                }
                if (z.evenings) {
                    dataArray3[y] = z.evenings
                } else {
                    dataArray3[y] = 0
                }
                if (z.visits) {
                    dataArray4[y] = z.visits
                } else {
                    dataArray4[y] = 0
                }
                // //lineTimes
                // if (z.times) {
                //     dataArray2[y] = z.times
                // } else {
                //     dataArray2[y] = 0
                // }

            }
        }
        var maxY = 5
        var max1 = Math.max.apply(null, dataArray4)
        // var max2 = Math.max.apply(null, dataArray2)
        maxY = Math.max(maxY, max1)
        //画图一
        // 初始 option1
        option1 = {
            title: {
                text: '就餐人数统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['就餐人数'],
                orient: 'vertical',
                left: 'right'
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                data: dateArray,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#cccccc',
                        type: 'solid',
                        width: 1
                    }
                },
                axisLabel: {
                    rotate: 0,
                    textStyle: {
                        color: '#339933',
                        fontSize: 12
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                name: '',
                max: maxY,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#cccccc',
                        type: 'solid',
                        width: 1
                    }
                },
                axisLabel: {
                    formatter: '{value}人 '
                }
            }],
            toolbox: {
                show: true,
                x: 'right',
                y: 'center',
                orient: 'vertical',
                feature: {
                    dataView: {
                        show: true,
                        readOnly: true
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [
                {
                    name: '就餐人数',
                    type: 'line',
                    data: dataArray4
                }]
        }

        myChart1.hideLoading()
        myChart1.setOption(option1)

        //画图二
        var len=0;
        if(json.data.categoryList){
            len = json.data.categoryList.length
        }
        var temp = []
        if (len > 0) {
            var earlyPeople = 0
            var middayPeople = 0
            var eveningPeople = 0
            for (var t = dateArray.length - 1; t >= 0; t--) {
                earlyPeople += dataArray1[t]
                middayPeople += dataArray2[t]
                eveningPeople += dataArray3[t]
            }
            for (var i = 0; i < len; i++) {
                var map = {}
                map.name = json.data.categoryList[i].categoryName
                if (json.data.categoryList[i].categoryType == 1) {
                    map.value = earlyPeople
                } else if (json.data.categoryList[i].categoryType == 2) {
                    map.value = middayPeople
                } else {
                    map.value = eveningPeople
                }
                temp.push(map)
            }
            // var hit = 0
            // for (var j = len; j < json.data.length; j++) {
            //     if (json.data[j]) {
            //         hit += json.data[j].visitCount
            //     }
            // }
            // if (hit) {
            //     temp.push({
            //         name: '其他',
            //         value: hit
            //     })
            // }
        } else {
            var map = {}
            map.name = '暂无数据'
            map.value = 0
            temp.push(map)
        }
        // 初始 option2
        option2 = {
            title: {
                text: '餐品类型统计'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}次({d}%)'
            },
            toolbox: {
                show: true,
                x: 'right',
                y: 'center',
                orient: 'vertical',
                feature: {
                    dataView: {
                        show: true,
                        readOnly: true
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [{
                name: '就餐人数',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                data: temp
            }]
        }

        myChart2.hideLoading()
        myChart2.setOption(option2)

        $(window).resize(function () {
            $(myChart1).resize()
            $(myChart2).resize()
        })

        //画表格
        var table = ''
        if (!ListVisit[0]) {
            table += '<tr >'
            table += '<td colspan=4 style=\'text-align:center\'><i class=\'glyphicon glyphicon-warning-sign\'></i>暂无数据</td>'
            table += '</tr>'
            $('#visitDataTable').html(table)
        } else {
            var earlyPeople = 0
            var middayPeople = 0
            var eveningPeople = 0
            var visitPeople = 0
            for (var t = dateArray.length - 1; t >= 0; t--) {
                table += '<tr class="body-row">'
                table += '<td class="col1">' + dateArray[t] + '</td>'
                table += '<td class="col2">' + dataArray1[t] + '</td>'
                earlyPeople += dataArray1[t]
                table += '<td class="col3">' + dataArray2[t] + '</td>'
                middayPeople += dataArray2[t]
                table += '<td class="col4">' + dataArray3[t] + '</td>'
                eveningPeople += dataArray3[t]
                table += '<td class="col4">' + dataArray4[t] + '</td>'
                visitPeople += dataArray4[t]
                table += '</tr>'
            }
            table += '<tr><td colspan="1">总计</td><td>' + earlyPeople + '</td><td>' + middayPeople + '</td><td>' + eveningPeople + '</td><td>' + visitPeople + '</td></tr>'
        }
        $('#visitDataTable').html(table)
    }

    //回调函数
    function callback_chart (json) {
        analysis(json)
    }

</script>
<script type="text/javascript">
    $(document).ready(function () {
        App.init()
        InitHeaderRadio()
        formatDateTime()
        selectGen_new()
        // 请求数据
        queryAll()
        //饼图 折线图 表格
        var myChart1 = echarts.init(document.getElementById('main'), 'macarons')
        var myChart2 = echarts.init(document.getElementById('mainPie'), 'macarons')
        myChart1.showLoading()
        myChart2.showLoading()

    })
</script>
</body>
</html>
